<template>
  <div class="dashboard">
    <GridLayout
      v-model:layout="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :margin="[10,10]"
      style="width:100%; height:100%;"
    >
      <GridItem v-for="item in layout" :key="item.i" v-bind="item">
        <component :is="item.component" />
      </GridItem>
    </GridLayout>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GridLayout, GridItem, type LayoutItem } from 'vue3-grid-layout';
import BehaviorAnalysisChart from './BehaviorAnalysisChart.vue';
import ResourceAnalysisChart from './ResourceAnalysisEmbed.vue';
import StudentProfileChart from './StudentProfileD3.vue';
import TeacherProfileChart from './TeacherProfileChart.vue';
import PolicySandboxD3 from './PolicySandboxD3.vue';

interface WidgetLayout extends LayoutItem {
  component: any;
}

const layout = ref<WidgetLayout[]>([
  { i: 'behavior', x: 0, y: 0, w: 6, h: 8, component: BehaviorAnalysisChart },
  { i: 'resource', x: 6, y: 0, w: 6, h: 8, component: ResourceAnalysisChart },
  { i: 'student', x: 0, y: 8, w: 6, h: 10, component: StudentProfileChart },
  { i: 'teacher', x: 6, y: 8, w: 6, h: 8, component: TeacherProfileChart },
  { i: 'policy', x: 0, y: 16, w: 12, h: 8, component: PolicySandboxD3 }
]);
</script>

<style scoped>
.dashboard { width: 100%; height: 100%; overflow: auto; }
</style>